<template>
  <view class="tn-margin-top-xs tn-margin-bottom-lg">
    <tn-scroll-view  @scrolltolower="onPulling">
      <!-- 图文信息 -->
      <block v-for="(item, index) in list">
        <tn-swipe-action>
          <tn-swipe-action-item :options="options" @click="clickItem($event, item)">
            <view class="tn-flex tn-padding list__item list__article" @click="goto('/pages/article/view', item.article.id)">
              <view class="tn-padding-right-sm" v-if="item.article.picture">
                <view>
                  <image :src="item.article.picture" lazy-load :lazy-load-margin="1" mode="aspectFill"></image>
                </view>
              </view>
              <view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                  <view class="justify-content-item">
                    <text class="tn-color-cat tn-text-md tn-text-bold">{{ item.article.title || '' }}</text>
                  </view>
                </view>
                <view class=" tn-padding-top-xs  tn-text-ellipsis-2">
                  <text class="tn-color-gray">
                    {{ item.article.description || '' }}
                  </text>
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
                  <view v-if="item.category" class="justify-content-item tn-text-center">
                    <text class="tn-padding-right-xs">#</text> {{ item.category.title || '' }}
                  </view>
                  <view class="justify-content-item tn-flex tn-flex-col-center">
                    <view class="tn-color-gray tn-text-sm">
                      <text class="tn-icon-share-square tn-padding-right-xs"></text>
                      <text class="tn-padding-right">{{ item.share_total }}</text>
                      <text class="tn-icon-star tn-padding-right-xs"></text>
                      <text class="tn-padding-right">{{ item.collection_total }}</text>
                      <text class="tn-icon-praise tn-padding-right-xs"></text>
                      <text class="">{{ item.approval_total }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </tn-swipe-action-item>
        </tn-swipe-action>
      </block>
    </tn-scroll-view>
  </view>
</template>

<script>
  import base from '@/common/mixin/base.js';
	import request from '@/common/request.js';
  
  export default {
    name: 'CxUserArticleList',
    mixins: [base],
		props: {
			model: {
			  type: String
			},
		},
    data() {
      return {
      	list: [],
      	query: {
      	  page: 1,
      	  limit: 4,
      	},
      	options: [{
      	    icon: 'delete',
      	    style: {
      	      backgroundColor: '#E83A30',
      	      width: '80rpx',
      	      height: '80rpx',
      	      margin: '0 12rpx',
      	      borderRadius: '100rpx'
      	    }
      	  }
      	]
      }
    },
    methods: {
      clickItem: function(e, item) {
        if (e.type === 'button') {
          this.handleRemove(this.model, item);
        } else if (e.type === 'item') {
          this.goto('/pages/article/view', item.article.id);
        }
      },
      onPulling(e) {
        this.getUserListData(this.model);
      }
    },
    created() {
      this.getUserListData(this.model);
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/static/scss/common.scss';
</style>
